<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
  </div>
  <button id="mck">甲乙</button>
  <script src="../node_modules/@vue/reactivity/dist/reactivity.global.js"></script>
  <script>
    let  { reactive,shallowReactive,readonly,shallowReadonly ,effect}  = VueReactivtiy;
    let state = reactive ({
      id:0,
      name:"程凯",
      list:[1,2,3,4]
    })
    effect(()=>{
      app.innerHTML = state.list[100];
    })
    // const myck = ()=>{
    //   state.id++;
    // }
    // mck.onclick = myck;
    setTimeout(() => {
      state.list[100] = 100;
      console.log("我在修改数据");
    }, 1000);
  </script>
</body>
</html>